import React from "react";
import {Form as AntdForm, Row as AntdRow} from 'antd';
import {
    renderItems,
    VJsonComponent,
    VJsonComponentBase,
} from "../factory";
import _ from 'lodash'
import {Gutter} from "antd/lib/grid/row";
import {apply} from "..";

export interface RowVJsonProp {
    /**
     * 是否可见
     */
    visible?: boolean

    gutter?: Gutter | [Gutter, Gutter]
    align?: "top" | "middle" | "bottom" | "stretch"
    justify?: "start" | "end" | "center" | "space-around" | "space-between"
    className?: string

    /**
     * 内容元素
     */
    items: any[]
}

export interface RowState {

}

@VJsonComponent({
    view: 'row'
})
export default class Row extends VJsonComponentBase<RowVJsonProp, RowState> {
    static defaultProps = {
        visible: true,
        items: []
    }

    constructor(props: any) {
        super(props);

        _.defaults(
            props.vjson,
            Row.defaultProps
        )
    }

    render() {
        if (!this.props.vjson.visible) {
            return null
        }

        return (
            // @ts-ignore
            <AntdRow key={this.key} view_id={this.key} aria-roledescription={this.view}
                     className={apply(this, this.props.vjson.className)}
                     style={apply(this, this.props.vjson.style)}
                     align={apply(this, this.props.vjson.align)}
                     gutter={apply(this, this.props.vjson.gutter)}
                     justify={apply(this, this.props.vjson.justify)}
            >
                {
                    ...renderItems(this, this.props.vjson.items)
                }
            </AntdRow>
        )
    }
}
